import React from 'react'
// import TagCloud from 'react3dtagcloud'
import TagCloud from 'react-tag-cloud';
import randomColor from 'randomcolor';
import CloudItem from './CloudItem';
// import { TagCloud } from 'react-tagcloud'
import {List} from 'antd'
import '../style/css/compoments/tag.css'
const styles = {
    large: {
      fontSize: 60,
      fontWeight: 'bold'
    },
    small: {
      opacity: 0.7,
      fontSize: 16
    }
  };
class Tag extends React.Component{
    constructor(props) {
        // es6继承必须用super调用父类的constructor
        super()
        this.state = {
            sortData:['tag'],
        }
    }
    componentDidMount() {
        setInterval(() => {
            this.forceUpdate();
        }, 4000);
    }
    getDetail=(obj)=>{
        console.log(obj)
    }
    render() {
        return (
            <div className="tag">
            <div className="tagMore">More></div>
                <List
                    header="标签"
                    bordered
                    dataSource={this.state.sortData}
                    renderItem={item => (
                        <List.Item>
                            <TagCloud 
                                className='tag-cloud'
                                style={{
                                fontFamily: 'sans-serif',
                                //fontSize: () => Math.round(Math.random() * 50) + 16,
                                fontSize: 30,
                                width:'100%',
                                height:'250px',
                                color: () => randomColor({
                                    hue: 'blue'
                                }),
                                padding: 5,
                                }}>
                                <CloudItem text="Custom item, Hover me!" />
                                <CloudItem text="Custom item 2, Hover me!" />
                                {
                                   this.props.mytag&&this.props.mytag.slice(0,10).map((item,index)=>{
                                        return(
                                            <div key={index} onClick={()=>this.getDetail(item.id)}
                                                style={{
                                                    fontFamily: 'serif',
                                                    fontSize: 25,
                                                    fontStyle: 'italic',
                                                    fontWeight: 'bold',
                                                    cursor: 'pointer',
                                                    color: randomColor()
                                                }}>{item.name}</div>
                                        )
                                   })
                                }
                            </TagCloud>
                        {/* <TagCloud speed={2} radius={100} tagName={TagData} url=""></TagCloud> */}
                        {/* <TagCloud
                            minSize={12}
                            maxSize={35}
                            tags={TagData}
                            onClick={tag => alert(`'${tag.value}' was selected!`)}
                            /> */}
                        </List.Item>
                    )}
                    />
            </div>
        )
    }
}
export default Tag